<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row gap-8">
      <div class="md:w-1/2">
        <img :src="product.image" :alt="product.name" class="w-full h-auto rounded-lg shadow-md">
      </div>
      <div class="md:w-1/2">
        <h1 class="text-3xl font-bold mb-2">{{ product.name }}</h1>
        <div class="flex items-center mb-4">
          <div class="text-yellow-400 flex">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half-o"></i>
          </div>
          <span class="text-gray-500 text-sm ml-2">({{ product.reviews }} 条评价)</span>
        </div>
        <div class="mb-4">
          <span class="text-primary font-bold text-3xl">¥{{ product.price }}</span>
          <span v-if="product.discount" class="text-gray-400 line-through text-lg ml-2">
            ¥{{ (product.price / (1 - product.discount / 100)).toFixed(2) }}
          </span>
          <span v-if="product.discount" class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">
            节省 ¥{{ ((product.price / (1 - product.discount / 100)) - product.price).toFixed(2) }}
          </span>
        </div>
        <div class="mb-6 text-gray-700">
          <p>{{ product.description }}</p>
        </div>
        <div class="mb-6">
          <div class="flex items-center">
            <span class="mr-4">数量:</span>
            <div class="flex">
              <button 
                class="w-10 h-10 flex items-center justify-center rounded-l border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
                @click="decrement"
              >
                <i class="fa fa-minus"></i>
              </button>
              <input 
                type="number" 
                :value="quantity" 
                min="1" 
                class="w-16 h-10 border-t border-b border-gray-300 text-center focus:outline-none"
                @change="handleQuantityChange"
              >
              <button 
                class="w-10 h-10 flex items-center justify-center rounded-r border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
                @click="increment"
              >
                <i class="fa fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap gap-4">
          <button 
            class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-colors flex-1 md:flex-none"
            @click="addToCart"
          >
            <i class="fa fa-shopping-cart mr-2"></i>加入购物车
          </button>
          <button 
            class="bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-md transition-colors flex-1 md:flex-none"
            @click="buyNow"
          >
            <i class="fa fa-credit-card mr-2"></i>立即购买
          </button>
        </div>
      </div>
    </div>
    <div class="mt-12">
      <h2 class="text-2xl font-bold mb-6">商品详情</h2>
      <div class="bg-white rounded-lg shadow-sm p-6">
        <div v-html="product.details"></div>
      </div>
    </div>
    <Toast ref="toastRef" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Toast from '../components/Toast.vue'

const route = useRoute()
const router = useRouter()
const store = useStore()
const toastRef = ref(null)

const productId = computed(() => parseInt(route.params.id))
const product = computed(() => store.getters.getProductById(productId.value) || {})
const quantity = ref(1)

onMounted(() => {
  if (!product.value.id) {
    router.push('/')
  }
})

const increment = () => {
  quantity.value++
}

const decrement = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const handleQuantityChange = (e) => {
  const value = parseInt(e.target.value)
  if (value >= 1) {
    quantity.value = value
  } else {
    quantity.value = 1
  }
}

const addToCart = () => {
  store.dispatch('addToCart', { ...product.value, quantity: quantity.value })
  toastRef.value.show()
}

const buyNow = () => {
  store.dispatch('addToCart', { ...product.value, quantity: quantity.value })
  router.push('/cart')
}
</script>    